<template>
  <div>
    <el-table
      highlight-current-row
      :data="webSiteList"
      max-height="400"
      size="small"
      tooltip-effect="dark"
      style="width: 98%;line-height:33px;min-height:400px;padding:0 10px 0 26px;border:#eeeeee" @row-click="handleModulesClick">
      <el-table-column
        prop="name"
        label="站点名称" width="60">
      </el-table-column>
      <el-table-column
        prop="crtUser"
        label="创建人" width="50">
      </el-table-column>
      <el-table-column
        prop="crtTime "
        label="创建时间"  width="60">
      </el-table-column>
      <el-table-column
        prop="description"
        label="站点描述" width="60">
      </el-table-column>
      <el-table-column
        prop="url"
        width="60"
        label="站点网址">
      </el-table-column>
      <el-table-column
        prop="icpNo"
         width="70"
        label="ICP备案号">
      </el-table-column>
      <el-table-column prop="aaa"
                       label="运营机构" width="50" class="hhh">
      </el-table-column>
      <!-- <el-table-column prop="appSecret"
                       v-if="!noUpdate"
                       label="选择栏目" width="50" class="hhh">
      </el-table-column> -->
      <el-table-column
        label="操作"
        width="90">
        <template slot-scope="scope">
          <el-button @click="updateNewspaper(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="deleteNewspaper(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="job-table">
      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="修改网站信息"
      :visible.sync="dialogVisible"
      width="80%">
      <el-row>
        <el-col :span="20"  style="height: 280px;">
          <el-form ref="webSite" :model="copyRow" :rules="webSite"
          size="small"
                    label-width="80px">
            <el-form-item label="站点名称" prop="name">
              <el-input size="small" v-model="copyRow.name"></el-input>
            </el-form-item>
            <el-form-item label="站点描述" prop="description">
              <el-input size="small" v-model="copyRow.description"></el-input>
            </el-form-item>
            <el-form-item label="站点网址" prop="url">
              <el-input size="small" v-model="copyRow.url"></el-input>
            </el-form-item>
            <el-form-item label="ICP备案号" prop="icpNo">
              <el-input size="small" v-model="copyRow.icpNo"></el-input>
            </el-form-item>
            <el-form-item label="绑定流程" prop="region">
              <el-select size="small" v-model="copyRow.auditType" placeholder="请选择绑定流程" @change="changevalue">
                <el-option v-for="item in selectdatas" :key="item.codeValue" :value="item.codeValue" :label="item.codeName"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-form label-width="80px" size="small">
          <el-form-item label="运营机构">
            <el-col :span="20">
              <div>
                <div class="treeArea" style="padding-top: 10px;max-height: 30vh;overflow-y: auto;">

                  <el-tree ref='treeTwo' :data="treeData" :props="defaultProps" v-loading="loading" show-checkbox
                    @node-click="handleNodeClick" :expand-on-click-node='false' node-key="id" :highlight-current='true'
                    :default-expand-all='true'>
                  </el-tree>
                </div>

              </div>
            </el-col>
          </el-form-item>
        
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="saveData">保存修改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  webSiteList,
  detailWebSite,
  deleteWebSite,
  updateWebSite
} from "@/api/systemManage/multistationManagement";

import { getOrgTree } from "@/api/systemManage/partJobManagement";

import Bus from "@/utils/eventTransfer.js";
import { compositeScach } from "@/api/systemManage/roleManagement";
export default {
  name: "multistation-website-list",
  props: {
    org: {
      type: [String]
    },
    noUpdate: {
      type: [Boolean]
    }
  },
  data() {
    return {
      // 绑定流程 开始
      selectdatas: [],
      listItems: {
        rowBounds: {
          // offset: 1,
          offset: 0,
          limit: 100
        },
        condition: [
          {
            property: "codeType",
            value: "WORK_FLOW",
            type: "EQ"
          },
          {
            property: "status",
            value: "0",
            type: "EQ"
          }
        ],
        sort: [
          {
            direction: "ASC",
            property: "orderNo"
          }
        ],
        fields: []
      },
      auditType: "",
      // 绑定流程 结束
      webSiteList: [],
      total: 0,
      defaultProps: {
        children: "children",
        label: "name"
      },
      copyRow: {},
      webSite: {
        name: [{ required: true, message: "请输入站点名称", trigger: "blur" }],
        description: [
          { required: true, message: "请输入站点描述", trigger: "blur" }
        ],
        url: [{ required: true, message: "请输入站点网址", trigger: "blur" }]
      },
      dialogVisible: false,
      listQuery: {
        page: 1,
        limit: 10
      },
      myListName: "",
      postList: {
        sort: [
          {direction: "DESC", property: "crtTime"}
        ],
        rowBounds: {
          offset: 0,
          limit: 10
        },
        condition: [
          {
            property: "orgId",
            value: "",
            type: "EQ"
          },
          {
            property: "orgName",
            value: "",
            type: "EQ"
          }
        ]
      }
    };
  },
  watch: {
    org: {
      handler: function(val, oldVal) {
        if (this.org) {
          this.getList(this.org);
        }
      },
      immediate: true
    }
  },
  mounted() {
    Bus.$on("websiteList", data => {
      this.getList(this.org);
    });
    Bus.$on("dataName", data => {
      this.myListName = data[0].name;
      this.orgName = data[0].name;
      this.orgId = data[0].id;
    });
    const id = {
      id: this.$store.getters.orgId
    };
    getOrgTree(id).then(response => {
      this.treeData = response.data.data;
      // 默认给个组织机构ID
      // this.selectItem.selectOuinfoId = this.treeData[0].id
      // this.loading = false
      // this.activeName = 'newspaper'
    });
  },
  beforeMount() {
    this.selectdata();
  },
  methods: {
    changevalue(val) {
      let obj = {};
      obj = this.selectdatas.find(item => {
        return item.codeValue === val;
      });
      this.auditType = obj.codeName;
    },
    // 加载下拉数据 绑定流程
    selectdata() {
      compositeScach(this.listItems).then(response => {
        this.selectdatas = response.data.data.records;
      });
    },
    handleModulesClick(row, event, column) {
      this.$emit("handlemodulesclick", row);
    },
    saveData() {
      var form = "webSite";
      this.$refs[form].validate(valid => {
        if (valid) {
          this.dialogVisible = false;
          this.copyRow.orgIds = this.$refs.treeTwo.getCheckedKeys();
          updateWebSite(this.copyRow).then(response => {
            if (response.data.statusCode === 200) {
              this.$message({
                message: "保存成功",
                type: "success"
              });
              this.getList(this.org);
            } else {
              this.$message.error("保存失败");
            }
          });
        }
      });
    },
    updateNewspaper(row) {
      this.dialogVisible = true;

      let query = {
        rowBounds: {
          offset: 0,
          limit: 1
        },
        condition: [
          {
            property: "orgId",
            value: row.orgId,
            type: "EQ"
          },
          {
            property: "id",
            value: row.id,
            type: "EQ"
          }
        ]
      };

      detailWebSite(query).then(response => {
        if (response.data.statusCode === 200) {
          this.$refs.treeTwo.setCheckedKeys(
            response.data.data.records[0].orgIds
          );
          this.$message({
            message: "查询成功",
            type: "success"
          });
          this.copyRow = row;
        } else {
          this.$message.error("查询失败");
        }
      });
    },
    deleteNewspaper(row) {
      let query = {
        id: row.id
      };
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteWebSite(query).then(response => {
            if (response.data.statusCode === 200) {
              this.webSiteList.splice(this.webSiteList.indexOf(row), 1);
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.getList(this.org);
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 翻页器使用
    handleSizeChange(val) {
      this.postList = val;
      this.getList(this.org);
    },
    // 翻页器使用
    handleCurrentChange(val) {
      // this.postList.page = this.postList.limit * (val - 1);
      this.postList.rowBounds.offset =
        this.postList.rowBounds.limit * (val - 1);
      this.getList(this.org);
    },
    getList(org) {
      const _that = this;
      let query = {
        orgId: org,
        page: this.listQuery.page,
        rows: this.listQuery.limit
      };
      this.postList.condition[0].value = this.org;

      this.postList.condition[1].value = this.orgName;
      webSiteList(this.postList).then(response => {
        this.webSiteList = response.data.data.records;
        if (this.webSiteList) {
          for (var i = 0; i < this.webSiteList.length; i++) {
            this.webSiteList[i].aaa = _that.myListName;
          }
        }

        this.total = response.data.data.count;
        if (this.webSiteList != "") {
          this.$emit("handlemodulesclick", this.webSiteList[0]);
        }
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
